<template>
  <div class="app-container">
    <!--操作区-->
    <el-row class="search-collapse">
      <el-col :span="24">
        <el-button type="primary" plain @click="addRootForm" class="el-icon-plus">新增</el-button>
      </el-col>
    </el-row>

    <!--数据显示区-->
    <el-row class="select-table table-striped">
      <el-col :span="24">
          <el-table
            :data="treeData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="menuId"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

            <el-table-column prop="menuName" label="菜单名称"></el-table-column>
            <el-table-column prop="orderNum" label="显示顺序"></el-table-column>
            <el-table-column prop="perms" label="权限标识"></el-table-column>
            <el-table-column prop="path" label="路由地址"></el-table-column>
            <el-table-column  label="菜单状态">
              <template slot-scope = "scope">
                <el-tag v-if="scope.row.status === 0">正常</el-tag>
                <el-tag v-else type="danger">停用</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope = "scope">
                <el-button type="text" class="el-icon-edit" @click="editForm(scope.row)">编辑</el-button>
                <el-button type="text" v-if="scope.row.menuType === 'C' || scope.row.menuType === 'M'"
                class="el-icon-plus" @click="addForm(scope.row)">添加子菜单</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-col>
    </el-row>
    <el-dialog :title="title" :visible="dialogFormVisible" :show-close="false" width="560px">
      <el-form :model="form" ref="form">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单:" :label-width="formLabelWidth" prop="parentId">
               <el-input  :value="parentName" readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单类型" :label-width="formLabelWidth" prop="menuType">
               <el-input :value="menuTypeName" readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="menulable" :label-width="formLabelWidth" prop="menuName">
              <el-input v-model="form.menuName"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType === 'C'" >
            <el-col :span="12">
                <el-form-item   label="是否外链" :label-width="formLabelWidth" prop="isFrame">
                  <el-radio-group v-model="form.isFrame">
                    <el-radio :label= "0" >是</el-radio>
                    <el-radio :label= "1" >否</el-radio>
                  </el-radio-group>
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item   label="路由地址" :label-width="formLabelWidth" prop="isFrame">
                <el-input v-model="form.path" placeholder="请输入路由地址"></el-input>
              </el-form-item>
            </el-col>
          </el-col>

          <el-col :span="12">
            <el-form-item label="显示排序" :label-width="formLabelWidth" prop="orderNum">
              <el-input v-model="form.orderNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="form.menuType ==='F' " :span="24">
            <el-col :span="12">
              <el-form-item label="权限" :label-width="formLabelWidth" prop="perms">
                <el-input v-model="form.perms"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
            <el-col :span="12">
              <el-form-item label="显示状态" :label-width="formLabelWidth" prop="visible">
                <el-radio-group v-model="form.visible">
                  <el-radio :label= "0" >正常</el-radio>
                  <el-radio :label= "1" >停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单状态" :label-width="formLabelWidth" prop="status">
                <el-radio-group v-model="form.status">
                  <el-radio :label= "0" >正常</el-radio>
                  <el-radio :label= "1" >停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
         </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import menuService from '@/service/menuService'
  //vue规范
  export default{
    //初始化数据
    data() {
      return {
        //树形菜单数据
        treeData:[],
        //模态框开关变量
        dialogFormVisible:false,
        //模态框标签
        title:"",
        menulable:"菜单名称",
        //向后台提交的数据
        form:{
          menuName:undefined,
          parentId:0,
          orderNum:undefined,
          path:undefined,
          menuType:undefined,
          isFrame:1,
          perms:undefined,
          visible:0,
          status:0
          },
          //菜单类型名
          menuTypeName:'',
          formLabelWidth:'100px',
          //上级菜单名
          parentName:''
      }
    },
    //vue管理的方法
    methods: {
        addRootForm(){
          menuService.addRootForm();
        },
        editForm(data){
          menuService.editForm(data);
        },
        addForm(data){
          menuService.addForm(data);
        },
        saveForm(){
          menuService.saveForm();
        }
    },
    //初始化调用方法
    created() {
      menuService.init(this)
      menuService.loadData()
    }
  }
</script>
